All Buttons 按鈕圖列

Choosing buttons  選擇按鈕

每個按鈕都具有高、中或低三種強調級別:

高強調(High emphasis)適用於主要操作(Primary Action)

中等強調(Medium emphasis)適用於重要但不干擾其他元素的操作

低強調(Low emphasis)適用於可選或輔助操作

不同強調級別的按鈕示例:

強調級別元件作用示例操作
高強調Extended FAB適用於更大螢幕,提供更顯眼的主要操作建立、撰寫、發起新執行緒
FAB預設用於主要操作,有三種尺寸(小、中、大)建立、撰寫
Filled button顏色對比度強,通常用於最終或解鎖操作儲存、確認、完成
中等強調Filled tonal button顏色較淡,視覺層級低於填充按鈕儲存、確認、完成
Elevated button適用於需要從背景中分離出來的操作回覆、檢視全部、新增到購物車
Outlined button用於重要但非主要操作,例如“檢視全部”或“新增到購物車”回覆、檢視全部、撤回
低強調Text button視覺佔比最低,適用於次要操作瞭解更多、更改賬戶、開啟
Segmented button比單個圖示按鈕更顯眼左對齊/居中對齊/右對齊
Icon button適用於書籤、收藏等可選操作新增到收藏夾、列印

Hierarchy  層次結構

Placement  放置位置

在一個介面中,可以使用不同型別的按鈕來區分不同的功能。主要功能應該最醒目,其他功能則相對次要。

  1. 最重要的操作:用填充按鈕,讓它顯眼易見
  1. 次要的操作:用文字按鈕,讓它不那麼顯眼
  1. 特別重要的操作:用擴充套件浮動按鈕,讓它最顯眼最容易點選

最佳實踐(Best Practices)

✓ 高強調按鈕(Filled Button)適用於主要操作,可與低強調按鈕(Text Button)組合使用。
✓ 中等強調按鈕(Outlined Button)可以放置在高強調按鈕旁,以形成層級對比。
✓ 低強調按鈕(Text Button)適合放置在中等強調按鈕旁,作為次要操作選項。
✓ 對於單一重要操作,建議使用填充按鈕(Filled Button)獨立存在,以保持介面清晰。
× 避免在可用空間內垂直堆疊按鈕,如果有足夠空間,應使用並排排列。